<template>
  <div class="card-content" v-for="(item, index) in RecommendVideoList" :key="item.id">
  <el-card :body-style="{ padding: '0px' }" class="card" >
    <div class="cover-wrap">
      <div class="cover">
        <span class="origin-icon" style="display: none">原创</span>
        <div class="img" >
          <a>
            <img :src="item.cover[0]" style="width: 100%"/>
          </a>
        </div>
        <img class="play-icon" src="https://rs.dance365.com/img/release_play@3x.fb313c4d.png" style="border-style: none;"/>
      </div>
    </div>

    <div class="moment-detail">
      <div class="card-detail">
        <div class="title" title="这是一个标题" style="cursor: pointer">
          <div class="example">
            <span class="flag course"></span>
            <a href="xxx" class="differ-viewed">{{item.title}}</a>
          </div>
        </div>
        <div class="viewCount">
          <span class="num">{{item.statisticsBackup.viewCount}}人浏览</span>
        </div>
        <div class="interrelated-info">
          <span class="praiseCount">
            <i class="iconfont icon-dianzan info-icon"></i>
            <span class="num-info">{{item.statisticsBackup.favoriteCount}}</span>
          </span>
          <span class="commentCount">
            <svg class="info-icon icon">留言</svg>
            <span class="num-info">{{item.statisticsBackup.commentCount}}</span>
          </span>
          <span class="favoriteCount">
            <svg class="info-icon icon">收藏</svg>
            <span class="num-info">{{item.statisticsBackup.userCacheCount}}</span>
          </span>
        </div>
      </div>

      <div class="creator-info">
        <div class="left">
          <div class="creator">
            <a>
              <el-avatar :size="20" :src="item.creatorBackup.avatar" />
            </a>
          </div>
          <a>
            <span class="creator-name">{{item.creatorBackup.name}}</span>
          </a>
          <img class="certified-icon"/>
        </div>
        <span class="uploadTime" title="xxx">
          <time>{{ time(item.updateTime) }}</time>
        </span>
      </div>
    </div>
  </el-card>
</div>

</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Card",
});
</script>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import useHomeStore from '@/stores/home'

const homeStore = useHomeStore()
// 推荐视频列表
const RecommendVideoList = ref<any>([])
// 推荐列表每项的对象列表
const RecommendItem = ref<any>({
  videoImg:''
})
const VideoImgList = <any>([])
// 获取推荐列表
const getRecommendList = async () =>{
  try {
    await homeStore.getRecommendData(20,1)
    RecommendVideoList.value = homeStore.recommendList.map((item:any) =>{
      return item
    })

    console.log(RecommendVideoList, 55555)
  }catch (err:any){
    console.log(err.message)
  }

}



//处理时间戳
function time(time3:any) {
  var date = new Date(time3);
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var strDate =  M + D;
  return strDate
}

onMounted(() =>{
  getRecommendList()
})
</script>

<style scoped lang="scss">
.card-content{
  margin-right: 20px;
  &:nth-child(5n) {
    margin-right: 0;
  }
  margin-bottom: 20px;

  .card{
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 224px;
    height: auto;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    .cover-wrap{
      height: 125.87611px;
      .cover{
        position: relative;
        width: 100%;
        height: 100%;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        overflow: hidden;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        .origin-icon{
          position: absolute;
          left: 5px;
          top: 5px;
          font-size: 10px;
          width: 40px;
          height: 22px;
          line-height: 22px;
          display: inline-block;
          text-align: center;
          background: url(https://rs.dance365.com/home_img_ycpc.png) no-repeat;
          background-size: cover;
        }
        .img{
          width: 100%;
          height: 100%;
          background-position: 50%;
          background-size: cover;
          background-image: url(https://rs.dance365.com/photo/6df5808…_rs_b230c5e….jpg?imageView2/0/w/300/h/1200/format/webp/ignore-error/1);
        }
        .play-icon{
          position: absolute;
          bottom: 6px;
          left: 10px;
          display: inline-block;
          width: 30px;
          height: 30px;
        }
      }
    }
    .moment-detail{
      width: 100%;
      color: #b1b5c1;
      height: 155px;
      .card-detail{
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 13px;
        border-bottom: 1px solid #ebeced;
        height: 104px;
        .title{
          font-size: 14px;
          color: #111;
          padding-top: 10px;
          padding-bottom: 0;
          line-height: 18px;
          height: 45px;
          width: 100%;
        }
        .viewCount{
          font-size: 12px;
          display: flex;
          -webkit-box-pack: justify;
          justify-content: space-between;
          -webkit-box-align: center;
          align-items: center;
          height: 32px;
          line-height: 32px;
          .num{
            word-break: keep-all;
          }
        }
        .interrelated-info{
          position: relative;
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          font-size: 12px;
          height: 28px;
          line-height: 12px;
          padding-bottom: 12px;
          .praiseCount{

          }
          .info-icon{
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
          .num-info{
            box-sizing: border-box;
            max-width: 36px;
            margin-right: 18px;
          }
        }
      }
      .creator-info{
        box-sizing: border-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
        height: 50px;
        padding-left: 16px;
        position: relative;
        font-size: 12px;
        .left{
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          .creator{
            transform: translateY(1px);
            margin-right: 8px;
            .creator-name{
              color: #111;
              cursor: pointer;
              margin-left: 8px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            .certified-icon{
              margin-left: 4px;
              width: 12px;
              height: 12px;
            }
          }
        }
        .uploadTime{
          transform: translateY(1px);
          padding-right: 8px;
        }
      }
    }
  }
}



</style>
